<template>
  <div class="allShop">
    <!-- <div :style="!status?'background:#eee;':''">
      <div style="display:flex;justify-content: flex-end;padding:20px">
        <el-switch v-model="status" active-color="#13ce66" inactive-color="#ff4949" @change="statusChange"></el-switch>
      </div>
      <div style="height:400px;text-align: center;line-height:300px" v-if="!status">
        <p>当前{{this.businessType | businessType}}储值规则未启用，请点击右上角按钮开启此功能。</p>
      </div>
    </div>-->
    <div v-if="true">
      <el-button
        type="primary"
        @click="addLevel"
        style="margin-bottom:20px"
      >新增{{this.businessType | businessType}}储值规则</el-button>
      <avue-crud
        ref="crud"
        style="width:100%"
        :data="loadData"
        :option="tableOption"
        :table-loading="loading"
      >
        <template slot-scope="scope" slot="indexLabel">
          <span>{{scope.row.$index+(page.current - 1) * page.size + 1}}</span>
        </template>
        <template slot-scope="scope" slot="storedRuleBl">
          <span>{{scope.row.storedRuleRecharge?'充值'+scope.row.storedRuleRecharge+'元':''}}</span>
          <br />
          <span>{{scope.row.storedRuleProportion?'赠送'+scope.row.storedRuleProportion+'元':''}}</span>
        </template>
        <template slot="beginTime1" slot-scope="scope">
          <span>{{scope.row.beginTime && scope.row.endTime?scope.row.beginTime + ' - '+ scope.row.endTime:'永久有效'}}</span>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" icon="el-icon-view">编辑</el-button>
          <!-- <el-button
          @click="upDown(scope.row)"
          type="text"
          :icon="scope.row.isenabled == '01' ?'el-icon-sold-out':'el-icon-sell'"
          >{{scope.row.isenabled == '01'?'未启用':'已启用'}}</el-button>-->
        </template>
      </avue-crud>
      <template>
        <div style="width:100%;position:relative;height:50px">
          <el-pagination
            :page-sizes="[10, 20,30,40, 50, 100]"
            :pager-count="7"
            :current-page="page.current"
            :page-size="page.size"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin:2% 0;position:absolute;right:1%"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
          ></el-pagination>
        </div>
      </template>

      <el-dialog :title="title?'新增储值规则':'编辑储值规则'" :visible.sync="dialogFormVisible" width="60%">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="110px"
          class="demo-ruleForm"
        >
          <el-form-item label="规则名称" prop="storedRuleName">
            <el-input v-model="ruleForm.storedRuleName" style="width:50%"></el-input>
          </el-form-item>
          <el-form-item label="储值比例" required>
            <el-col :span="5">
              <el-form-item prop="storedRuleRecharge">
                充值
                <el-input
                  v-model="ruleForm.storedRuleRecharge"
                  :min="0"
                  type="number"
                  onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                  style="width:60%"
                ></el-input>元
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="storedRuleProportion">
                赠送
                <el-input
                  v-model="ruleForm.storedRuleProportion"
                  :min="0"
                  type="number"
                  onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                  style="width:60%"
                ></el-input>元
              </el-form-item>
            </el-col>大于零的整数
          </el-form-item>

          <el-form-item label="渠道类型" prop="storedChannelType">
            <el-select
              v-model="ruleForm.storedChannelType"
              placeholder="请选择渠道类型"
              style="width:100%"
            >
              <el-option
                v-for="item in qdType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规则有效期：">
            <el-col :span="24">
              <el-form-item prop="gzyxq">
                <el-select
                  v-model="ruleForm.gzyxq"
                  placeholder="请选择规则有效期"
                  style="width:50%"
                  @change="gzyxqChange"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in gzyxqList"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="gzyxqShow">
              <el-form-item prop="gzyxqsj">
                <el-date-picker
                  v-model="ruleForm.gzyxqsj"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width:50%"
                  @change="gzyxqsjChange"
                  :default-time="['00:00:00', '23:59:59']"
                >></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="储值规则说明：" prop="storedRuleExplain">
            <el-input
              v-model="ruleForm.storedRuleExplain"
              placeholder="请输入积分规则，不超过100个字"
              :maxlength="100"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="isenabled">
            <el-radio-group v-model="ruleForm.isenabled">
              <el-radio label="01">启用</el-radio>
              <el-radio label="00">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSave()" :loading="loading" v-if="title">保 存</el-button>
          <el-button type="primary" @click="handleUpdate()" :loading="loading" v-else>修 改</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script src='./allShop.js'></script>

<style lang="scss">
.allShop {
  margin: 10px 0px;
}
</style>